<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="模板类型" prop="templateType">
        <el-select v-model="queryParams.templateType" placeholder="请选择模板类型"size="small">
           <el-option
              v-for="item in templateTypeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模板需求" prop="templateDemand">
        <el-select v-model="queryParams.templateDemand" placeholder="请输入模板需求" size="small">
          <el-option
            v-for="item in templateDemandOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="岗位类型" prop="postType">
        <el-select v-model="queryParams.postType" placeholder="请选择岗位类型" size="small">
          <el-option
            v-for="item in postTypeOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-data-analysis"
          size="mini"
          @click="handleAnalysis"
        >统计分析</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="questionList">
      <el-table-column label="模板类型" align="center" prop="templateType" :formatter="(row,column)=>dictChange(row,column.property,templateTypeOptions)"/>
      <el-table-column label="模板需求" align="center" prop="templateDemand" :formatter="(row,column)=>dictChange(row,column.property,templateDemandOptions)"/>
      <el-table-column label="岗位类型" align="center" prop="postType" :formatter="(row,column)=>dictChange(row,column.property,postTypeOptions)"/>
      <el-table-column label="需求详情" align="center" prop="demandDesc" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 需求问卷详情对话框 -->
    <el-dialog title="问卷详情" :visible.sync="view" width="500px" append-to-body :close-on-click-modal="false">
      <el-form ref="viewForm" :model="viewForm" :rules="rules" label-width="80px">
        <el-form-item label="模板类型" prop="templateType">
          <div>{{viewForm.templateType}}</div>
        </el-form-item>
        <el-form-item label="模板需求" prop="templateDemand">
          <div>{{viewForm.templateDemand}}</div>
        </el-form-item>
        <el-form-item label="岗位类型" prop="postType">
          <div>{{viewForm.postType}}</div>
        </el-form-item>
        <el-form-item label="需求详情" prop="demandDesc">
          <div>{{viewForm.demandDesc}}</div>
        </el-form-item>
        <el-form-item label="创建人" prop="demandDesc">
          <div>{{viewForm.createBy}}</div>
        </el-form-item>
        <el-form-item label="创建时间" prop="demandDesc">
          <div>{{viewForm.createTime}}</div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 添加或修改需求问卷对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="模板类型">
          <el-select v-model="form.templateType" placeholder="请选择模板类型">
            <el-option
              v-for="item in templateTypeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模板需求" prop="templateDemand">
          <el-select v-model="form.templateDemand" placeholder="请输入模板需求" >
            <el-option
              v-for="item in templateDemandOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位类型">
          <el-select v-model="form.postType" placeholder="请选择岗位类型">
            <el-option
              v-for="item in postTypeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="需求详情" prop="demandDesc">
          <el-input v-model="form.demandDesc" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="analysisOpen" fullscreen>
      <div style="width:1600px;height:800px;margin:0px auto">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="chartTitle">模板类型需求统计</div>
          <div id="chart1" class="grid-content bg-purple" style="width:100%;height:400px">
          </div>
        </el-col>
        <el-col :span="12">
          <div class="chartTitle">模板内容需求统计</div>
          <div id="chart2" class="grid-content bg-purple" style="width:100%;height:400px">
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="chartTitle">岗位类型需求统计</div>
          <div id="chart3" class="grid-content bg-purple" style="width:100%;height:400px">
          </div>
        </el-col>
        <el-col :span="12">
          <div class="chartTitle">岗位类型—模板内容需求统计</div>
          <div id="chart4" class="grid-content bg-purple" style="width:100%;height:400px">
          </div>
        </el-col>
      </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listQuestion, addQuestion, updateQuestion, templateTypeAnalysis,templateDemandAnalysis,postTypeAnalysis,postAndDemandAnalysis } from "@/api/tool/datav/demandQuestion";
import * as echarts from "echarts";
import elementIcons from '../../components/icons/element-icons';
export default {
  name: "Question",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 需求问卷表格数据
      questionList: [],
      // 需求问卷模板类型选项字典
      templateTypeOptions:[],
      // 需求问卷模板需求选项字典
      templateDemandOptions:[],
      // 需求问卷岗位类型选项字典
      postTypeOptions:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 详情页弹出
      view:false,
      // 统计分析弹窗
      analysisOpen:false,
      // 详情页表单
      viewForm:{},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        templateType: undefined,
        templateDemand: undefined,
        postType: undefined,
        demandDesc: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      chart1:null,
      chart2:null,
      chart3:null,
      chart4:null,
      chartColor:[ "#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"],
    };
  },
  created() {
    this.getList();
    this.getDicts("cms_template_type").then(response => {
      this.templateTypeOptions = response.data
    })
    this.getDicts("cms_template_demand").then(response => {
      this.templateDemandOptions = response.data
    })
    this.getDicts("cms_post_type").then(response => {
      this.postTypeOptions = response.data
    })
  },
  methods: {
    /** 查询需求问卷列表 */
    getList() {
      this.loading = true;
      listQuestion(this.queryParams).then(response => {
        this.questionList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        templateType: undefined,
        templateDemand: undefined,
        postType: undefined,
        demandDesc: undefined,
        createBy: undefined,
        createTime: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleView(row){
      this.templateTypeOptions.forEach(element =>{
        if(element.dictValue == row.templateType){
          this.viewForm.templateType = element.dictLabel
        }
      })
      this.templateDemandOptions.forEach(element =>{
        if(element.dictValue == row.templateDemand){
          this.viewForm.templateDemand = element.dictLabel
        }
      })
      this.postTypeOptions.forEach(element =>{
        if(element.dictValue == row.postType){
          this.viewForm.postType = element.dictLabel
        }
      })
      this.viewForm.demandDesc = row.demandDesc
      this.viewForm.createBy = row.createBy
      this.viewForm.createTime = row.createTime
      this.view = true
    },
    /** 统计分析按钮 */
    handleAnalysis() {
      this.analysisOpen = true
      this.$nextTick(()=>{
        this.chart1 = echarts.init(document.getElementById("chart1"));
        this.chart2 = echarts.init(document.getElementById("chart2"));
        this.chart3 = echarts.init(document.getElementById("chart3"));
        this.chart4 = echarts.init(document.getElementById("chart4"));
        templateTypeAnalysis().then(res => {
          if(res.code == 200){
            let data = res.data
            data.forEach(item => {
              this.templateTypeOptions.forEach(element =>{
                if(item.name == element.dictValue){
                  item.name = element.dictLabel
                }
              })
            })
            this.createChart1(res.data)
          }
        })
        templateDemandAnalysis().then(res =>{
          if(res.code == 200){
            let data = res.data
            data.forEach(item => {
              this.templateDemandOptions.forEach(element =>{
                if(item.name == element.dictValue){
                  item.name = element.dictLabel
                }
              })
            })
            this.createChart2(res.data)
          }
        })
        postTypeAnalysis().then(res =>{
          if(res.code == 200){
            let data = res.data
            data.forEach(item => {
              this.postTypeOptions.forEach(element =>{
                if(item.name == element.dictValue){
                  item.name = element.dictLabel
                }
              })
            })
            this.createChart3(res.data)
          }
        })
        postAndDemandAnalysis().then(res =>{
          if(res.code == 200){
            this.createChart4(res.data)
          }
        })
      })
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateQuestion(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          } else {
            addQuestion(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          }
        }
      });
    },
    //字典转换方法
    dictChange(row,property,dictList){
      let name = ''
      dictList.forEach(element => {
        if(element.dictValue == row[property]){
          name = element.dictLabel
        }
      });
      return name
    },
    // 创建图表1
    createChart1(data){
      let legend = [];
      for (let item of data) {
        legend.push(item.name);
      }
      let option = {
        color:this.chartColor,
        title: {
          text: "",
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "normal",
            align: "center",
          },
          subtext: "",
          subtextStyle: {
            color: "#fff",
            fontSize: 14,
            align: "center",
          },
          itemGap: 7,
        },
        tooltip: {
          trigger: "item",
        },
        legend: [
          {
            show: true,
            type: "scroll",
            orient: "vertical",
            right: "10%",
            align: "left",
            top: "15%",
            textStyle: {
              color: "#000",
              fontSize: 14,
            },
            height: "90%",
            itemGap: 10,
            left: "65%",
            data:legend,
          },
        ],
        series: [
          {
            name: "",
            type: "pie",
            center: ["35%", "50%"],
            roseType: false,
            stillShowZeroSum: true,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              show: false,
              formatter: "{b} ",
              fontSize: 14,
            },
            startAngle: "0",
            data: data,
          },
        ],
      };
      this.chart1.setOption(option,true)
    },
    // 创建图表2
    createChart2(data){
      let legend = [];
      for (let item of data) {
        legend.push(item.name);
      }
      let option = {
        color:this.chartColor,
        title: {
          text: "",
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "normal",
            align: "center",
          },
          subtext: "",
          subtextStyle: {
            color: "#fff",
            fontSize: 14,
            align: "center",
          },
          itemGap: 7,
        },
        tooltip: {
          trigger: "item",
        },
        legend: [
          {
            show: true,
            type: "scroll",
            orient: "vertical",
            right: "10%",
            align: "left",
            top: "15%",
            textStyle: {
              color: "#000",
              fontSize: 14,
            },
            height: "90%",
            itemGap: 10,
            left: "65%",
            data:legend,
          },
        ],
        series: [
          {
            name: "",
            type: "pie",
            center: ["35%", "50%"],
            roseType: false,
            stillShowZeroSum: true,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              show: false,
              formatter: "{b} ",
              fontSize: 14,
            },
            startAngle: "0",
            data: data,
          },
        ],
      };
      this.chart2.setOption(option,true)
    },
    // 创建图表3
    createChart3(data){
      let legend = [];
      for (let item of data) {
        legend.push(item.name);
      }
      let option = {
        color:this.chartColor,
        title: {
          text: "",
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "normal",
            align: "center",
          },
          subtext: "",
          subtextStyle: {
            color: "#fff",
            fontSize: 14,
            align: "center",
          },
          itemGap: 7,
        },
        tooltip: {
          trigger: "item",
        },
        legend: [
          {
            show: true,
            type: "scroll",
            orient: "vertical",
            right: "10%",
            align: "left",
            top: "15%",
            textStyle: {
              color: "#000",
              fontSize: 14,
            },
            height: "90%",
            itemGap: 10,
            left: "65%",
            data:legend,
          },
        ],
        series: [
          {
            name: "",
            type: "pie",
            center: ["35%", "50%"],
            roseType: false,
            stillShowZeroSum: true,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              show: false,
              formatter: "{b} ",
              fontSize: 14,
            },
            startAngle: "0",
            data: data,
          },
        ],
      };
      this.chart3.setOption(option,true)
    },
    createChart4(data){
      let xAxisLabel = []
      let yAxisLabel = []
      this.postTypeOptions.forEach(element =>{
        xAxisLabel.push(element.dictLabel)
      })
      this.templateDemandOptions.forEach(element =>{
        yAxisLabel.push(element.dictLabel)
      })
      data.forEach(item => {
        this.postTypeOptions.forEach(element => {
          if(item[0] == element.dictValue){
            item[0] = element.dictLabel
          }
        })
        this.templateDemandOptions.forEach(element =>{
          if(item[1] == element.dictValue){
            item[1] = element.dictLabel
          }
        })
      })
      let option = {
        color:this.chartColor,
        tooltip: {
          position: "top",
        },
        grid: {
          bottom: "40px",
          left: "5%",
          top: "40px",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xAxisLabel,
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              fontSize: 14,
              color: "#000",
            },
            formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = (paramsNameNumber/2)>5?(paramsNameNumber/2):5;  //一行显示几个字
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                    for (var p = 0; p < rowNumber; p++) {
                        var tempStr = "";
                        var start = p * provideNumber;
                        var end = start + provideNumber;
                        if (p == rowNumber - 1) {
                            tempStr = params.substring(start, paramsNameNumber);
                        } else {
                            tempStr = params.substring(start, end) + "\n";
                        }
                        newParamsName += tempStr;
                    }

                } else {
                    newParamsName = params;
                }
                return newParamsName
            },
          },
          splitArea: {
            show: true,
          },
        },
        yAxis: [
          {
            type: "category",
            data: yAxisLabel,
            axisLabel: {
              textStyle: {
                fontSize: 14,
                color: "#000",
              },
              formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = (paramsNameNumber/2)>5?(paramsNameNumber/2):5;
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                    for (var p = 0; p < rowNumber; p++) {
                        var tempStr = "";
                        var start = p * provideNumber;
                        var end = start + provideNumber;
                        if (p == rowNumber - 1) {
                            tempStr = params.substring(start, paramsNameNumber);
                        } else {
                            tempStr = params.substring(start, end) + "\n";
                        }
                        newParamsName += tempStr;
                    }

                } else {
                    newParamsName = params;
                }
                return newParamsName
              },
            },
            axisLine: {
              show: false,
            },
            splitArea: {
              show: true,
            },
          },
        ],
        visualMap: {
          min: 0,
          max: 5000,
          show: false,
          calculable: true,
          orient: "vertical",
          top: "40px",
          left: "right",
        },
        series: [
          {
            name: "",
            type: "heatmap",
            data: data,
            label: {
              show: true,
              fontSize: 15,
              color:'#000',
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.chart4.setOption(option,true)
    },
  }
};
</script>

<style lang="scss" scoped>
.demandDetails{
  width: 280px;
  border-radius: 5px;
  border: 1px solid rgb(95, 95, 95);
}
.chartTitle {
    font-size: 28px;
    font-weight: 800;
    color: #000;
    text-align: center;
}
</style>